.article {
    width: 700px;
    height: 150px   ;
    border: 1px solid #e1e1e1;
    background-color: #f8f8f8;
    margin-bottom: 20px;
    margin-left: 50px;
    padding: 10px;
    border-radius: 5px; 
    &:hover {
        .title {
          color: #336699;
          cursor: pointer;
        }
      }
    .article-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
        .warp {
            height: 50px;
            width: 50px;
            border-radius: 5px;
            overflow: hidden;
            background: #000;
            .article-img-box {
                width: 100%;
                padding-bottom: 55.71%;
                position: relative;
                .article-img {
                    position: absolute;
                    left:0;
                    top:0;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    border-radius: 5px;
                }
            
            }
        }
        .article-detail {
            margin-left: 20px;
            .tag-and-time {
                margin-top: 10px;
                .article-tag {
                    color: #336699;
                }
                .article-created-time {
                    font-style: italic; 
                }
            }
        }
    }
    .article-content {
        height: 43%;
        border-top: 1px solid #e1e1e1;
        padding: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        cursor: pointer;
    }
}






